<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="dream约文" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="dubox">
			<view class="xiaotxt" @click="show = true">
				取消订单
			</view>
			<view class="title">
				服务进度
			</view>
			<view class="jietxt">
				请在三天内确认订单，超出时间订单将自动取消
			</view>
			<u-steps :current="orderInfo.status - 1" dot="true" stepTitleColor="#45C4B0" inactiveColor="#999999"
				activeColor="#45C4B0">
				<u-steps-item title="待接单"></u-steps-item>
				<u-steps-item title="进行中"></u-steps-item>
				<u-steps-item title="已完成"></u-steps-item>
			</u-steps>
		</view>

		<view class="danbox">
			<view class="dantop">
				<image :src="orderInfo.writer.pic | formatImgUrl" class="head" mode=""></image>
				<view class="dantitle">
					{{orderInfo.writer.username}}
				</view>
				<image
					:src="$options.filters.formatImgUrl(orderInfo.writer.writer_level.is_active?orderInfo.writer.writer_level.level.image:orderInfo.writer.writer_level.level.hide_img)"
					@click="$go('/pages/user/grade?uid='+orderInfo.writer.membe_id)" class="danpic" mode="" v-if="orderInfo.writer.is_writer">
				</image>
				<image
					:src="$options.filters.formatImgUrl(orderInfo.writer.user_level.is_active?orderInfo.writer.user_level.level.image:orderInfo.writer.user_level.level.hide_img)"
					class="danji" mode="" v-if="orderInfo.writer.is_vip"></image>
			</view>
			<view class="jcbox">
				<image :src="'/images/je.png' | formatImgUrl" class="jcpic" mode=""></image>
				<view class="jctxt">
					{{orderInfo.good.title}}
				</view>
			</view>
			<view class="dtxt">
				{{orderInfo.good.type_name}}<text>| 共{{orderInfo.num}}单</text>
			</view>
			<view class="gong">
				共计支付
				<text>{{orderInfo.price}}</text>
				币
			</view>
			<view class="zhibox">
				<view class="zhitxt">
					制作天数
				</view>
				<view class="daytxt">
					{{orderInfo.day}}天
				</view>
			</view>
			<view class="zhibox">
				<view class="zhitxt">
					下单数量
				</view>
				<view class="daytxt">
					{{orderInfo.num}}单
				</view>
			</view>
			<view class="zhibox">
				<view class="zhitxt">
					订单备注
				</view>
				<view class="daytxt hui">
					{{orderInfo.notes?orderInfo.notes:'暂无'}}
				</view>
			</view>
			<view class="zhibox">
				<view class="zhitxt">
					优惠券
				</view>
				<view class="daytxt red" v-if="orderInfo.cv_id">
					-{{orderInfo.cv.price}}<text>币</text>
				</view>
				<view class="daytxt hui" v-else>
					暂无
				</view>
			</view>
			<view class="jiatxt">
				实付款：<text>{{orderInfo.price}}</text>币
			</view>
		</view>
		<view class="timebox">
			<view class="txt">
				下单时间
			</view>
			<view class="qitxt">
				{{$options.filters.parseTime(orderInfo.create_time,'{y} / {m} / {d} {h}:{i}:{s}') }}
			</view>
		</view>
		<view class="xuzhi">
			下单须知:<br>
			1、未满18周岁的用户，请务必在监护人明示同意的前提下，进行相关交易。成功付款后，订单金额将由平台保管，订单完成后到账写手账户；<br>
			2、下单后请沟通确认约稿内容、截稿时间、版权归属等细节；<br>
			3、如订单发生争议，可与写手沟通，积极解决问题。如沟通未果可到【我的】-【订单查询】选择该订单，选择【申请退款】或在【更多操作】进行订单申诉；<br>
			4、为保护自身权益，请勿脱离平台交易，此种情况下，双方权益均无法得到平台保障。同时一经发现，将永久封禁双方账号。<br>
			5、如写手引导脱离平台交易，或发现其他不合理、违法违规行为，请向平台申诉。<br>
			6、平台禁止购买、出售、代写学位论文或组织学位论文买卖等学术造假行为，一经确认，交易双方将可能承担相应责任。<br>
			7、阅读并同意<text @click.stop="goToxie">《平台约文服务协议及指南》</text>
		</view>


		<view class="dibox" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
			<view class="zaibox">
				<view class="zaileft">
					<view class="dbox">
						<view class="zaititle">
							编辑接单
						</view>
						<view class="text">
							请进行订单调整
						</view>
					</view>
					<view class="zaitxt">
						已经使用的优惠部分不支持调整
					</view>
				</view>
				<view class="que">
					确认编辑
				</view>
			</view>
		</view>


		<!-- 取消订单 -->
		<u-popup mode="center" :show="show" @close="close">
			<view class="mask">
				<view class="matitle">
					是否确定取消该订单
				</view>
				<view class="matxt">
					此操作不可更改
				</view>
				<view class="quque">
					<view class="quli" @click="show = false">
						取消
					</view>
					<view class="quli quactive" @click="goToindex">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				show: false,
				orderInfo: {}
			}
		},
		onLoad(e) {
			if (e.id) {
				this.getOrderInfo(e.id)
			} else {
				this.$common.errorToShow('参数异常')
			}
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
			var url = getCurrentPages()
			this.urlPath = '/' + url[0].route

		},
		methods: {
			getOrderInfo(id) {
				this.$api.default.request('order/orderInfo', {
					id: id
				}).then((res) => {
					if (res.code) {
						this.orderInfo = res.data
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			goToindex() {
				this.$api.default.request('order/closeOrder', {
					id: this.orderInfo.id
				}).then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							uni.redirectTo({
								url: '/pages/index/index'
							})
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}


	.content {
		padding: 20rpx 30rpx 200rpx !important;

		// .u-steps-item__wrapper{
		// 	width: auto !important;
		// 	height: auto !important;
		// }
		.dubox {
			margin-bottom: 20rpx;
			padding: 20rpx 30rpx;
			border-radius: 8px;
			background: #FFFFFF;
			position: relative;

			.xiaotxt {
				top: 20rpx;
				right: 33rpx;
				position: absolute;
				font-size: 20rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #999999;
			}

			.title {
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
				padding-bottom: 20rpx;
			}

			.jietxt {
				padding-bottom: 8rpx;
				font-size: 16rpx;
				font-weight: normal;
				text-align: center;
				letter-spacing: 0em;
				color: #999999;
			}
		}

		.danbox {
			padding: 20rpx 30rpx 40rpx;
			background-color: #FFFFFF;
			border-radius: 8px;
			margin-bottom: 20rpx;

			.dantop {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);

				.head {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					flex-shrink: 0;
				}

				.dantitle {
					padding: 0 8rpx 0 20rpx;
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0em;
					color: #3D3D3D;
				}

				.danpic {
					width: 64rpx;
					height: 48rpx;
				}

				.danji {
					width: 70rpx;
					height: 43rpx;
				}
			}

			.jcbox {
				display: flex;
				align-items: center;
				padding: 30rpx 0 10rpx;

				.jcpic {
					width: 32rpx;
					height: 32rpx;
				}

				.jctxt {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					padding-left: 12rpx;
				}
			}

			.dtxt {
				font-size: 20rpx;
				color: #3D3D3D;
				padding-bottom: 5rpx;

				text {
					padding-left: 8rpx;
					font-size: 20rpx;
					color: #999999;
				}
			}

			.gong {
				font-size: 20rpx;
				color: #999999;
				padding-bottom: 44rpx;

				text {
					font-size: 36rpx;
					color: #3D3D3D;
					padding: 0 8rpx;
					font-weight: bold;
				}
			}

			.zhibox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 60rpx;

				.zhitxt {
					font-size: 28rpx;
					font-weight: normal;
					letter-spacing: 0em;
					color: #999999;
				}

				.daytxt {
					font-size: 28rpx;
					font-weight: bold;
					color: #3D3D3D;
				}

				.hui {
					color: #999999;
				}

				.red {
					color: #F24D39;

					text {
						color: #F24D39;
						font-size: 20rpx;
						font-weight: 500;
					}
				}
			}

			.jiatxt {
				font-size: 20rpx;
				font-weight: normal;
				text-align: right;
				letter-spacing: 0em;
				color: #999999;

				text {
					font-size: 36rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}
			}
		}

		.timebox {
			height: 120rpx;
			border-radius: 8px;
			opacity: 1;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.txt {
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
			}

			.qitxt {
				font-size: 28rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #999999;
			}
		}

		.xuzhi {
			font-size: 20rpx;
			font-weight: normal;
			line-height: 28rpx;
			color: #999999;
		}

		.dibox {
			z-index: 66;
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #ffffff;
			width: 100%;
			padding: 20rpx 0;
			box-shadow: 0px -8px 20px 0px rgba(69, 196, 176, 0.2);

			.zaibox {
				width: 630rpx;
				height: 80rpx;
				border-radius: 12px;
				background: #3D3D3D;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 auto 10rpx;

				.zaileft {
					padding: 0 20rpx;

					.dbox {
						display: flex;
						align-items: center;

						.zaititle {

							font-size: 28rpx;
							font-weight: bold;
							background: linear-gradient(293deg, #45C4B0 -5%, #56E8B5 128%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							background-clip: text;
							text-fill-color: transparent;

						}

						.text {
							font-size: 28rpx;
							font-weight: bold;
							color: #FFFFFF;
							padding-left: 8rpx;
						}
					}

					.zaitxt {
						font-size: 20rpx;
						font-weight: normal;
						letter-spacing: 0px;
						color: #999999;
					}
				}

				.que {
					width: 190rpx;
					height: 80rpx;
					border-radius: 10px;
					opacity: 1;
					background: #45C4B0;
					font-size: 24rpx;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 80rpx;
				}
			}

			.xiebox {
				display: flex;
				align-items: center;
				justify-content: center;
				padding-bottom: 10rpx;

				.xietxt {
					font-size: 20rpx;
					font-weight: bold;
					color: #999999;

					text {
						font-size: 20rpx;
						font-weight: bold;
						color: #45C4B0;
						padding: 0 10rpx;
					}
				}
			}
		}

		.mask {
			background-color: #ffffff;
			width: 534rpx;
			border-radius: 8px;
			padding-top: 48rpx;

			.matitle {
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				letter-spacing: 0em;
				color: #3D3D3D;
				padding-bottom: 6rpx;
				line-height: 46rpx;
			}

			.matxt {
				font-size: 24rpx;
				font-weight: normal;
				text-align: center;
				letter-spacing: 0em;
				color: #999999;
				line-height: 34rpx;
				padding-bottom: 50rpx;
			}

			.quque {
				display: flex;
				align-items: center;
				border-top: 1px solid rgba(153, 153, 153, 0.1);

				.quli {
					width: 50%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: normal;
					letter-spacing: 0em;
					color: #3D3D3D;
				}

				.quactive {
					background: rgba(69, 196, 176, 0.05);
				}
			}
		}
	}
</style>